@import url("grid-responsive.css");

/* CSS Document */

/*===============================
	@font-face
=================================*/

@font-face {
    font-family:'ubuntu_titlingbold';
    src:url('../fonts/ubuntutitling-bold-webfont.eot');
    src:url('../fonts/ubuntutitling-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ubuntutitling-bold-webfont.woff') format('woff'),
        url('../fonts/ubuntutitling-bold-webfont.ttf') format('truetype'),
        url('../fonts/ubuntutitling-bold-webfont.svg#ubuntu_titlingbold') format('svg');
    font-weight:normal;
    font-style:normal;
}

/*===============================
	reset
=================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display:block; }
html, body { height:100%; }
body { line-height:1.3; }
img { color:transparent; font-size:0; vertical-align:middle; -ms-interpolation-mode:bicubic; }
ol, ul { list-style:none inside; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }

/*===============================
	frame
=================================*/

.hidden { display:none; }
.f-right { float:right; }
.f-left { float:left; }
.zindex { position:relative; z-index: 1; }
.center { text-align:center; }
.transition { -moz-transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; }

.spacer-10, .spacer-20, .spacer-40, .spacer-60, .spacer-80, .spacer-100 {
	display: block;
	clear: both;
}
.spacer-10 { height:10px; }
.spacer-20 { height:20px; }
.spacer-40 { height:40px; }
.spacer-60 { height:60px; }
.spacer-80 { height:80px; }
.spacer-100 { height:100px; }

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
.cf:after {
	content:"";
	display:table;
	clear:both;
}
.cf { *zoom:1; }

/*===============================
	html
=================================*/

* { -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; }
body { font-family:'ubuntu_titlingbold', sans-serif; color:#666659; background:url(../img/background.png); }
a { text-decoration:none; cursor:pointer; }
button, input[type=button], input[type=submit], input[type=image] { cursor:pointer; }
button, input, select, textarea { font-size:inherit; font-family:inherit; color:inherit; }
h1, h2, h3, h4, h5, h6, p, blockquote { margin-top:10px; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child,
h5:first-child, h6:first-child, p:first-child, blockquote:first-child { margin-top:0; }

/*===============================
	header
=================================*/

header {
	padding-top:20px;
	text-align:center;
}

/*===============================
	content
=================================*/

#content {
	padding-top:20px;
	padding-bottom:100px;
}

#main {
	min-height:700px;
	border-right:1px solid #E3DFDC;
	background:url(../img/bg_notebook.png) repeat-y;
	overflow:hidden;
}
#main-before { height:41px; padding:30px 10% 0; border-right:1px solid #E3DFDC; background:url(../img/bg_notebook_top.png) no-repeat; }
#timer { visibility:hidden; padding-left:41px; background:url(../img/loader.gif) no-repeat left; line-height:31px; }
#main div.wrapper { padding:0 10%; }

/*===============================
	section
=================================*/

section {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background-color:#E7E7E7;
	box-shadow:0 0 40px rgba(0,0,0,0.2);
}
section div.wrapper { padding:10px; }
div.progress { position:absolute; top:24px; left:10px; }
div.progress.alt { top:10px; }
#progress-bar { float:left; position:relative; width:200px; height:8px; background-color:#F0C97E; border-radius:4px; }
#progress-bar span { display:block; position:absolute; width:0; height:100%; background-color:#B98828; border-radius:4px; z-index:1; }

section a.btn-prev, section a.btn-next {
	float:left;
	width:35px;
	height:35px;
	background:url(../img/buttons.png) 0 -35px;
}
section a.btn-next { background-position:-35px -35px; margin-left:5px; }
section a.btn-prev:hover { background-position:0 0; }
section a.btn-next:hover { background-position:-35px 0; }

footer {
	padding-top:10px;
	background-color:#E8E8E8;
}

footer p { font-size:12px; color:#856C58; text-align:right; }

/*===============================
	form
=================================*/

div.items { position:relative; width:1000%; }
fieldset { float:left; position:relative; width:8%; padding:0 1%; margin-top:10px; }
form h1 { font-size:60px; color:#D86C00; }
legend, form h2 { font-size:36px; color:#D86C00; }
form.login p, form.register p { margin-top:20px; }
form.login p:first-child, form.register p:first-child { margin-top:0; }
form p { font-size:22px; }
form p.small { font-size:16px; }
form p a { color:#666; }
form p a:hover { text-decoration:underline; }
form p em { color:#D86C00; font-style:normal; }
legend, form h1, form h2, form p { line-height:1; }
form p.lead { line-height:1.3; }
span.btn-label { margin-left:10px; font-size:16px; color:#D86C00; }
form input[type=text],
form input[type=password],
form input[type=email] {
	padding:5px 5px 0;
	border:1px solid #999;
	border-radius:5px;
}
form input[type=button],
form input[type=submit] {
	padding:20px 40px 10px;
	border:none;
	background:#f2cc84;
	background:-moz-linear-gradient(top, #f2cc84 0%, #dfa742 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2cc84), color-stop(100%,#dfa742));
	background:-webkit-linear-gradient(top, #f2cc84 0%,#dfa742 100%);
	background:-o-linear-gradient(top, #f2cc84 0%,#dfa742 100%);
	background:-ms-linear-gradient(top, #f2cc84 0%,#dfa742 100%);
	background:linear-gradient(to bottom, #f2cc84 0%,#dfa742 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2cc84', endColorstr='#dfa742',GradientType=0);
	font-size:20px;
	color:#676759;
	box-shadow:0 4px #B98828;
	border-radius:5px;
}
#main-form label {
	display:inline-block;
	padding:5px 10px;
	margin-left:-12px;
	border:2px solid transparent;
	border-radius:5px;
	cursor:pointer;
	-moz-transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; 
}
#main-form label:hover { border-color:orange; }
#main-form label.checked { padding-right:55px; background:url(../img/check.png) no-repeat right; border-color:#D86C00; }

#main-form label.disabled {
	color:#CCC;
	cursor:default;
}
#main-form label.disabled:hover { border-color:transparent; }

#main-form table { width:100%; }
#main-form td { vertical-align:top; }
#main-form td:first-child { padding:10px 0; }
#main-form table label { margin-left:0; }
#main-form table label.checked { padding-right:5px; background:none; }
#main-form .radio { display:inline-block; width:24px; height:24px; border:1px solid #666; background-color:#FFF; line-height:30px; text-align:center; border-radius:2px;  }

#main-form fieldset.n6 { background:url(../img/bg_n2.png) no-repeat 600px 60px; }
form.login div.wrapper { background:url(../img/login.png) no-repeat 500px 0; }
form.register div.wrapper { background:url(../img/register.png) no-repeat 500px 0; }

/*===============================
	media queries
=================================*/

@media screen and (max-width:600px){
	#content { padding-bottom:0; }
	#main { min-height:0; }
	#main div.wrapper { padding:0 20%; }
	header img { width:100px; }
	fieldset { width:6%; padding:0 2%; }
	form h1 { font-size:36px; }
	legend, form h2 { font-size:20px; }
	form p { font-size:16px; }
	legend, form p { line-height:1; }
	div.progress { position:static; margin-bottom:10px; }
	section { position:static; }
}